<template>
  <div class="box">
    <el-row>
      <el-col :lg="{span:6,offset:0}" :sm="{span:12,offset:0}" :xs="{span:24,offset:0}">
        <el-card style='margin: 0 5px 10px'>
          <div>
            <span>总销售额</span>
            <el-tooltip class="item"
                        effect="dark"
                        content="Top Center 提示文字"
                        placement="top">
              <i class=" el-icon-warning-outline" style="float: right; padding: 3px 0"></i>
            </el-tooltip>
          </div>
          <h1 style="font-size: 30px">
            <countTo prefix="¥" :startVal='1' :endVal='2000' :duration='2000' />
          </h1>
          <div class="datac">
            <p> 周同比10% <i class="el-icon-caret-bottom"></i></p>
            <p> 日同比14% <i class="el-icon-caret-top"></i></p>
          </div>
          <el-divider></el-divider>
          <h5> 日销售额  ¥<countTo  :startVal='1' :endVal='2000' :duration='2000'/></h5>
        </el-card>
      </el-col>
      <el-col :lg="{span:6,offset:0}" :sm="{span:12,offset:0}" :xs="{span:24,offset:0}">
        <el-card style='margin: 0 5px 10px'>
          <div>
            <span>访问量</span>
            <el-tooltip class="item"
                        effect="dark"
                        content="Top Center 提示文字"
                        placement="top">
              <i class=" el-icon-warning-outline" style="float: right; padding: 3px 0"></i>
            </el-tooltip>
          </div>
          <h1 style="font-size: 30px">
            <countTo :startVal='1' :endVal='3000' :duration='2000' />
          </h1>
          <div class="datac" style="height: 50px;">
            <echarts height="50px" :option="option2" />
          </div>
          <el-divider></el-divider>
          <h5> 日销售额  ¥<countTo  :startVal='1' :endVal='3000' :duration='2000'/></h5>
        </el-card>

      </el-col>
      <el-col :lg="{span:6,offset:0}" :sm="{span:12,offset:0}" :xs="{span:24,offset:0}">
        <el-card style='margin: 0 5px 10px'>
          <div>
            <span>支付笔数</span>
            <el-tooltip class="item"
                        effect="dark"
                        content="Top Center 提示文字"
                        placement="top">
              <i class=" el-icon-warning-outline" style="float: right; padding: 3px 0"></i>
            </el-tooltip>
          </div>
          <h1 style="font-size: 30px">
            <countTo :startVal='1' :endVal='3000' :duration='2000' />
          </h1>
          <div class="datac" style="height: 50px;">
            <echarts :option="option3" height="50px" />
          </div>
          <el-divider></el-divider>
          <h5> 日销售额  ¥<countTo  :startVal='1' :endVal='3000' :duration='2000'/></h5>
        </el-card>

      </el-col>
      <el-col :lg="{span:6,offset:0}" :sm="{span:12,offset:0}" :xs="{span:24,offset:0}">
        <el-card style='margin: 0 5px 10px'>
          <div>
            <span>运营活动效果</span>
            <el-tooltip class="item"
                        effect="dark"
                        content="Top Center 提示文字"
                        placement="top">
              <i class=" el-icon-warning-outline" style="float: right; padding: 3px 0"></i>
            </el-tooltip>
          </div>
          <h1 style="font-size: 30px">
            <countTo suffix="%" :startVal='1' :endVal='78' :duration='2000' />
          </h1>
          <div class="datac" style="height: 50px;">
            <el-progress :stroke-width="12"
                         :percentage="90"
                         status="success" />
          </div>
          <el-divider></el-divider>
          <h5> 日销售额<countTo prefix="¥" :startVal='1' :endVal='2000' :duration='2000'/></h5>
        </el-card>

      </el-col>
    </el-row>
    <el-card>
      <el-row>
        <el-col :lg="{span:8,offset:0}">
          <el-tabs v-model="activeName">
            <el-tab-pane label="销售额" name="first" />
            <el-tab-pane label="访问量" name="second" />
          </el-tabs>
        </el-col>
        <el-col align="right" :lg="{span:8,offset:0}">
          <el-tabs style="display: inline-block" v-model="activeName">
            <el-tab-pane label="今日" name="first" />
            <el-tab-pane label="本周" name="qe" />
            <el-tab-pane label="本月" name="ewqeqw" />
            <el-tab-pane label="本年" name="secqweqond" />
          </el-tabs>
        </el-col>
        <el-col align="right" :lg="{span:8,offset:0}">
          <el-date-picker
              style="width: 80%"
              v-model="value2"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-permission="['Admin']" :lg="{span:17,offset:0}" :md="{span:17,offset:0}" :sm="{span:12,offset:0}">
          <echarts :option="option1" />
        </el-col>
        <el-col :lg="{span:7,offset:0}" :md="{span:7,offset:0}" :sm="{span:12,offset:0}">
          <el-card shadow="never" style="height: 400px;border-color: white">
            <div style="margin-bottom: 15px">
              <h4>门店销售排行榜</h4>
            </div>
            <div class="paihang" style="height: 350px">
              <el-scrollbar>
                <div class="paihangitem" v-for="o in 10" :key="o" >
                  <span>{{ o }}</span>
                  <span>{{'列表内容 ' + o }}</span>
                  <span>
                  {{ o * Math.random()*10 }}
                </span>
                </div>
              </el-scrollbar>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-divider>
        咨询管理系统
      </el-divider>
    </el-card>
  </div>
</template>

<script>
const echart = require('echarts')
import echarts from '../../components/echarts/echartss'
import countTo from 'vue-count-to';
export default {
  name: "index",
  components:{
    countTo,
    echarts
  },
  data() {
    return {
      activeName:"first",
      value2: '',
      option1:{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid:{
          left:'30px',
          right:'20px',
          top:'10px',
          bottom:'30px'
        },
        color:'#409EFF',
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','10月','a','b','c','d']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130,200,130,130,130,130],
            type: 'bar',
            name:"销售额"
          }
        ]
      },
      option3:{
        grid:{
          left:0,
          right:0,
          top:0,
          bottom:0
        },
        color:'#409EFF',
        xAxis: {
          type: 'category',
          show:false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','10月','a','b','c','d']
        },
        yAxis: {
          type: 'value',
          show:false,
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130,200,130,130,130,130],
            type: 'bar',
          }
        ]
      },
      option2:{
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top:0
        },
        xAxis: [
          {
            show:false,
            type: 'category',
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            show:false
          }
        ],
        series: [
          {
            name: 'Line',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 1,
              color:"#b79de9"
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color:new echart.graphic.LinearGradient(0, 0, 0, 2, [
                {
                  offset: 0,
                  color: '#b79de9'
                },
                {
                  offset:1,
                  color: 'rgba(255, 255, 255,0)'
                }
              ])
            },
            data: [120, 232, 111, 234, 220, 130, 110]
          }
        ]
      }
    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style scoped>
.datac{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  /*background-color: red;*/
}
.datac>div{
  width: 100%;
}
.box-card{
  margin-bottom: 10px;
}
>>>.el-tabs__nav-wrap::after{
  display: none;
}
.paihang .paihangitem{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.paihang .paihangitem span:nth-of-type(1){
  width: 30px;
  text-align: center;
}
.paihang .paihangitem:nth-of-type(-n+3) span:first-child{
  background-color: #314659;
  color: #fff;
  border-radius: 50%;
  height: 25px;
  line-height: 25px;
  width: 25px;
}
.paihang .paihangitem span{
  white-space: nowrap;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.paihang .paihangitem span:nth-of-type(2){
  width: 160px;
}
.paihang .paihangitem span:nth-of-type(3){
  width: 120px;
  text-align: right;
}
.el-scrollbar {
  height: 100%;
}
>>>.el-scrollbar__wrap{
  overflow-x:hidden;
}
.el-divider--horizontal{
  margin: 10px auto;
}
</style>
